<template>
	<view>
			<!-- 因为swiper特性的关系，请指定swiper的高度 ，swiper的高度并不会被内容撑开-->
			<swiper class="swiper" :indicator-dots="false">
				<swiper-item>
					<view class="grid-item-box" >
						<text :class="['text', activ==index? 'active':'']" v-for="(item,index) in fourlist" :key="index" @click="anli(index)">{{item.buildName}}</text>
					</view>
				</swiper-item>
				<swiper-item>

					<view class="grid-item-box">
					
						<text class="text" v-for="(name,index) in finishlist" @click="anlitwo(index)" :class="['text', activ==index+5? 'active':'']">{{name.buildName}}</text>
					</view>
				</swiper-item>
			</swiper>
			
			<view class="floorDept-item">
				<view class="floor-main" v-for="list in forlist">
				<view class="floor">
					<text>{{list.floorName}}</text> 
				</view>
				<view class="floorDept" >
					<text>{{list.floorDept}}</text>
					
				</view>
			</view>
			</view>
			<view style="height: 100vh;background-color: #f8f8f8;">
				
			</view>
	</view>
</template>

<script>
	import {classify} from "./DepartmentClassification.js"
	export default {
		components: {},
		data() {
			return {
			   numberFlist:"",// 医院楼层
			   fourlist:"",// 前四个
			   finishlist:"",//后四个
			   forlist:"",
			   activ:0
			}
		},
		methods: {
		anli(index){
			console.log(index);
			this.activ=index
			this.forlist=classify[index+1].data.floorList
		},
		anlitwo(id){
			console.log(id);
			this.activ=id+5
			this.forlist=classify[id+5].data.floorList
		},
		aaa(e){
		}
		},
		onLoad(){
			console.log(classify);
			this.numberFlist=classify
			this.fourlist=classify[0].data.buildList.slice(0,4)
			this.finishlist=classify[0].data.buildList.slice(4,6)
			this.forlist=classify[1].data.floorList
			console.log(this.forlist);
			
		}
	}
</script>

<style lang="scss">
	.active{
		font-size: 17px;
		color: #3eceb6;
		font-weight: 600;
	}

.grid-item-box{
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	justify-content: space-around;
	background-color: #f8f8f8;
	text{
		// width: 20%;
		height: 50px;
		line-height: 50px;
		// background-color: aqua;
		// overflow: hidden;
		text-align: center;
	}

}
.floorDept-item{
	position: absolute;
	top: 50px;
	width: 100%;
	// height: 100vh;
	box-sizing: border-box;
}
	.floor-main{
		display: flex;
		width: 100%;
		box-sizing: border-box;
		padding: 10px;
		background-color: #f8f8f8;
		.floor{
			width: 90px;
			text-align: center;
			background-color: #3eceb6;
			border-radius: 8px 0 0px 8px;
			display: flex;
			justify-content: center;
			align-items: center;
			
			text{
				// display: inline-block;
				// width: 100%;
				// height: 100%;
			}
		}
		.floorDept{
			flex: 1;
			display: flex;
			// justify-content: center;
			background-color: #fff;
			padding-left: 20px;
			padding: 16px;
			padding-right: 6px;
			align-items: center;
			border-radius:0 8px 8px 0px;
			font-size: 15px;
			
		}
	}
	 ::v-deep .swiper{
		height: 60px !important;
	}
</style>